<template>
	<div class="detailHeader">
		<el-collapse v-model="activeNames">
			<el-collapse-item title="船货信息" name="1">
        <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
					<el-row :gutter="20">
            <el-col :span="8">
							<el-form-item label="船名航次" prop="shipvoyageName" class="top">
								<el-input
									v-model="formData.shipvoyageName"
									size="mini"
									placeholder="请输入船名"
									disabled
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="泊位" prop="berthNo" class="top">
								<el-input
									v-model="formData.berthNo"
									size="mini"
									placeholder="请输入泊位"
									disabled
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="内外贸" prop="tradeType" class="top">
								<el-input
									v-model="formData.tradeType"
									size="mini"
									placeholder="请输入内外贸"
									disabled
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="船代" prop="customerName" class="top">
								<el-input
									v-model="formData.customerName"
									size="mini"
									placeholder="请输入船代"
									disabled
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="净吨" prop="netTon" class="top">
								<el-input
									v-model="formData.netTon"
									size="mini"
									placeholder="请输入净吨"
									disabled
								/>
							</el-form-item>
						</el-col>
						<el-col :span="8">
				<el-form-item label="非生产性停时(小时)" prop="shipStopHours" class="top">
					<div slot="label" style="display:inline-block" :style="{width:'270px'}">
					<span style="margin-right: 20px;" v-if="formData.tradeType === '外贸'">非生产性停时(小时)</span>
					<span style="margin-right: 20px;" v-if="formData.tradeType === '内贸'">非生产性停时(天)</span>
					<el-button
						size="mini"
						type="primary"
						@click="getStopRecord"
					>查询停工记录</el-button>
					</div>
						<el-input
							v-if="formData.tradeType === '外贸'"
							size="mini"
							v-model="formData.shipStopHours"
							disabled
						></el-input>
						<el-input
							v-else
							size="mini"
							v-model="formData.shipStopDays"
							disabled
						></el-input>
						
				</el-form-item>
			</el-col>
						
            <el-col :span="8">
							<el-form-item label="抵锚时间" prop="arrivalAnchorageTime" class="top">
								<el-input
									v-model="formData.arrivalAnchorageTime"
									size="mini"
									placeholder="请输入抵锚时间"
									disabled
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="起锚时间" prop="leaveAnchorageTime" class="top">
								<el-input
									v-model="formData.leaveAnchorageTime"
									size="mini"
									placeholder="请输入起锚时间"
									disabled
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="在锚天数" prop="anchorageDays" class="top">
								<el-input
									v-model="formData.anchorageDays"
									size="mini"
									placeholder="请输入在锚天数"
									disabled
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="靠泊时间" prop="berthTime" class="top">
								<el-input
									v-model="formData.berthTime"
									size="mini"
									placeholder="请输入靠泊时间"
									disabled
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="离泊时间" prop="leaveBerthTime" class="top">
								<el-input
									v-model="formData.leaveBerthTime"
									size="mini"
									placeholder="请输入离泊时间"
									disabled
								/>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="" prop="berthDays" class="top">
								
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="停泊时间（天）" prop="berthDays" class="top">
								<el-input
									v-model="formData.berthDays"
									size="mini"
									placeholder="请输入停泊时间（天）"
									disabled
								/>
							</el-form-item>
						</el-col>
            
			<el-col :span="8">
							<el-form-item label="备注" prop="remark" class="top">
								<el-input
									v-model="formData.remark"
									size="mini"
									placeholder="请输入备注"
									disabled
								/>
							</el-form-item>
						</el-col>
			<el-col :span="24">
					<el-form-item label="" prop="shipperName" class="top">
						<el-card class="bgcard">合计 ： {{totalAmount | formatMoney}}</el-card>
					</el-form-item>
				</el-col>
			<el-col :span="24">
				<el-form-item label="" prop="shipperName" class="top">
					<BaseTable
						:data="tableData"
						:columns="tableColumn"
						:tableHeight="300"
						:pagination="false"
					></BaseTable>
				</el-form-item>
			</el-col>
					</el-row>
				</el-form>
			</el-collapse-item>
		</el-collapse>
		<el-dialog
			title="停工记录"
			:visible.sync="stopRecordDrawer"
			width="50%"
			append-to-body>
				<BaseTable
				:data="stopData"
				:columns="stopColumn"
				:tableHeight="300"
				:pagination="false"
			></BaseTable>
			
      
    </el-dialog>
	</div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
import api from '@/api/billingSettlementSys/shipCost/shipUseCost'

export default {
  name: 'settlement',
  components: { BaseTable },
  props: {
    // 表单验证规则
    rules: {
      type: Object
    },
    customerData: {
      type: Array
    },
    isGet: {
      type: Boolean,
      default: false
    }

  },
  data() {
    return {
      activeNames: ['1', '2'],
      formData: {
        shipvoyageName: '',
        berthNo: '',
        tradeType: '',
        customerName: '',
        netTon: '',
        arrivalAnchorageTime: '',
        leaveAnchorageTime: '',
        anchorageDays: '',
        berthTime: '',
        leaveBerthTime: '',
        berthDays: '',
        shipStopHours: '',
        remark: ''
      }, // from
      timeRange: [],
      fileList: [],
      tableData: [], // 结算数据
      tableColumn: [ // table表头
        { prop: 'rateItemName', label: '费目' },
        { prop: 'quantity', label: '数量' },
        { prop: 'rate', label: '单价' },
        { prop: 'unitName', label: '计量单位' },
        { prop: 'quantityPlug', label: '时长(日/时)' },
        { prop: 'amount', label: '金额(元)', isMoney: true },
        { prop: 'tax', label: '税率' },
        { prop: 'taxAmount', label: '税额', isMoney: true }
      ],
      stopData: [], // 停工记录
      stopColumn: [ // 停工记录表头
        { prop: 'stopTime', label: '停工时间', width: 270 },
        { prop: 'stopHours', label: '停工时长(小时)' },
        { prop: 'stopName', label: '停工原因' },
        { prop: 'stopTypeName', label: '停工类型' }
      ],
      totalAmount: 0, // 总计金额
      remark: '', // 提单备注
      shipId: '',
      stopRecordDrawer: false
    }
  },
  created() {

  },
  computed: {
  },
  methods: {
    /**
     * 打开停工记录
     */
    async getStopRecord() {
      this.stopRecordDrawer = true
      const res = await api.reqGetStopRecord(this.shipId)
      this.stopData = res.data.data
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/form.less";
[v-cloak] {
	display: none;
}
</style>
